<template>
    <div class="index4">
        <div class="content_top">
      <div class="xxbox">
        <p>选择星旋</p>
        <a-select
        ref="select"
        v-model:value="select1"
        style="width: 85px;margin-bottom: 5px;"
        :placeholder="'sat4L'"
        allowClearget_mset
      >
        <a-select-option
          :value="item.value"
          v-for="item in typeOptions"
          :key="item.label"
        >{{
          item.value
          }}</a-select-option>
      </a-select>
      </div>
      <div style="margin-left:50px;">
        <p>起始日期</p>
        <a-space direction="vertical">
           <a-date-picker v-model:value="value1" />
        </a-space>
      </div>
      <div style="margin-left:20px;">
        <p>结束日期</p>
        <a-space direction="vertical">
           <a-date-picker v-model:value="value2" />
        </a-space>
      </div>
    </div>
    <div class="content_bottom">
      <div class="top">
        sat4L
      </div>
      <div class="bottom">
        <piechart2 :title="'网络类型'" :title1="'各类型占比'" :rowdata="rowdata1" :colors="['#B34138','#344453','#709EA6','#C9866B']"></piechart2>
        <piechart2 :title="'用户类型'" :title1="'不同类型用户数量占比'" :rowdata="rowdata2" :colors="['#B34138','#344453','#709EA6','#C9866B','#9CC5AF']"></piechart2>
        <piechart2 :title="'加密情况'" :title1="'不通加密情况数量占比'" :rowdata="rowdata3" :colors="['#B34138','#344453','#709EA6','#C9866B']"></piechart2>
      </div>
    </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import moment, { Moment } from 'moment';
import piechart2 from './charts/piechart2.vue';
export default defineComponent({
    components:{piechart2},
  name: 'index4',
  setup() {
    let rowdata1 = ref([
      { value: 335, name: 'UNKNOWN' },
      { value: 310, name: '类型4' },
      { value: 234, name: '类型5' },
      { value: 135, name: '类型6' },
    ]);
    let rowdata2 = ref([
      { value: 35, name: 'UNKNOWN' },
      { value: 20, name: '用户类型0' },
      { value: 204, name: '用户类型1' },
      { value: 15, name: '用户类型2' },
      { value: 135, name: '用户类型3' },
    ]);
    let rowdata3 = ref([
      { value: 35, name: 'UNKNOWN' },
      { value: 70, name: '加密' },
      { value: 95, name: '未加密' },
      { value: 234, name: '部分加密' },
    ]);
    let select1 = ref();
    const dateFormat = 'YYYY/MM/DD';
    const typeOptions = ref([
      {
        value: '1',
        label: 'M710a',
      },
      {
        value: '2',
        label: 'M650',
      },
      {
        value: '3',
        label: 'M650',
      },
    ]);
    return {
      select1, typeOptions, value1: ref<Moment>(moment('2013/01/01', dateFormat)),
      value2: ref<Moment>(moment('2020/05/18', dateFormat)),
        rowdata1,
        rowdata2,
        rowdata3
    }
  },
})
</script>
<style scoped lang=less>
::v-deep .ant-calendar-picker-input {
    width: 350px !important;
}

::v-deep .ant-select-selector {
    /* 修改选择器（输入框）的样式 */
    background: #DDDDDD !important;

    /* 举例：修改边框颜色 */
    // .ant-select-selection-placeholder {
    //   color: #000 !important;
    // }

}

.index4 {
    width: 100%;
    height: 100%;
    background: #fff;

    .content_top {
        width: 100%;
        height: 100px;
        background: #F6F8F8;
        padding: 20px 20px;
        display: flex;

        p {
            margin-bottom: 0;
        }
    }
    .content_bottom {
    width: 100%;
    height: calc(100% - 120px);
    background: #fff;
    margin-top: 20px;
    .top{
      width: 100%;
      height: 60px;
      background: #F6F8F8;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    .bottom{
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
    }
  }
}
</style>